<div id="comment-container" class="ui bottom attached segment">
    <!--留言区域列表-->
    <div class="ui teal segment">
        <div class="ui threaded comments">
            <h3 class="ui dividing header">Comments</h3>
            <!-- 一级评论 -->
            <div class="comment">
                <a class="avatar">
                    <img src="https://unsplash.it/100/100?image=1005">
                </a>
                <div class="content">
                    <a class="author">Matt</a>
                    <div class="metadata">
                        <span class="date">Today at 5:42PM</span>
                    </div>
                    <div class="text">
                        How artistic!
                    </div>
                    <div class="actions">
                        <a class="reply">回复</a>
                    </div>
                </div>
            </div>
            <!-- 一级评论 -->
            <div class="comment">
                <a class="avatar">
                    <img src="https://unsplash.it/100/100?image=1005">
                </a>
                <div class="content">
                    <a class="author">Elliot Fu</a>
                    <div class="metadata">
                        <span class="date">Yesterday at 12:30AM</span>
                    </div>
                    <div class="text">
                        <p>This has been very useful for my research. Thanks as well!</p>
                    </div>
                    <div class="actions">
                        <a class="reply">回复</a>
                    </div>
                </div>
                <!-- 二级回复评论 -->
                <div class="comments">
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://unsplash.it/100/100?image=1005">
                        </a>
                        <div class="content">
                            <a class="author">Jenny Hess</a>
                            <div class="metadata">
                                <span class="date">Just now</span>
                            </div>
                            <div class="text">
                                Elliot you are always so right :)
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 一级评论 -->
            <div class="comment">
                <a class="avatar">
                    <img src="https://unsplash.it/100/100?image=1005">
                </a>
                <div class="content">
                    <a class="author">Joe Henderson</a>
                    <div class="metadata">
                        <span class="date">5 days ago</span>
                    </div>
                    <div class="text">
                        Dude, this is awesome. Thanks so much
                    </div>
                    <div class="actions">
                        <a class="reply">回复</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form action="{% url 'comments:comment' blog.id %}" method="POST">
        {% csrf_token %}
        <div class="ui form">
            <div class="field">
                <textarea name="content" placeholder="请输入评论信息..."></textarea>
            </div>

            <div class="fields">
                <div class="field m-mobile-wide m-margin-bottom-small">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="nickname" placeholder="姓名">
                    </div>

                </div>

                <div class="field m-mobile-wide m-margin-bottom-small">
                    <div class="ui left icon input">
                        <i class="mail icon"></i>
                        <input type="text" name="email" placeholder="邮箱">
                    </div>
                </div>

                <div class="field  m-margin-bottom-small m-mobile-wide">
                    <button class="ui teal button m-mobile-wide" type="submit"><i class="edit icon"></i>发布</button>
                </div>
            </div>
            <div>
                {% if comment_form.errors %}
                    {% for field in comment_form %}
                        {% for error in field.errors %}
                            <strong>{{ error }}</strong>
                            <br>
                        {% endfor %}
                    {% endfor %}
                {% else %}
                    {{ msg }}
                {% endif %}
            </div>
        </div>
    </form>
</div>